$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
.vivify {
  -webkit-animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.pulsate {
  -webkit-animation-name: pulsate;
  animation-name: pulsate;
  -webkit-transform-origin: center;
  transform-origin: center;
}
// /**************************上下左右动画*****************************/
@-webkit-keyframes top-in {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  5% {
    transform: translateY(-25px);
    opacity: 0.5;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@-webkit-keyframes bottom-in {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }

  5% {
    transform: translateY(50px);
    opacity: 0.5;
  }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@-webkit-keyframes bottom-in-slow {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  // 80% {
  //   transform: translateY(10px);
  //   opacity: 0.5;
  // }

  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
@-webkit-keyframes left-in {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }

  5% {
    transform: translateX(-50px);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
@-webkit-keyframes right-in {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }

  5% {
    transform: translateX(50px);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.top-in {
  -webkit-animation: top-in 0.4s ease-in-out;
  animation: top-in 0.4s ease-in-out;
}
.bottom-in {
  -webkit-animation: bottom-in 0.4s ease-in-out;
  animation: bottom-in 0.4s ease-in-out;
}
.bottom-in-slow {
  -webkit-animation: bottom-in-slow 0.8s ease-in;
  animation: bottom-in-slow 0.8s ease-in;
}
.left-in {
  -webkit-animation: left-in 0.4s ease-in-out;
  animation: left-in 0.4s ease-in-out;
}
.right-in {
  -webkit-animation: right-in 0.4s ease-in-out;
  animation: right-in 0.4s ease-in-out;
}
// 动画==============
.scale-in-hor-left {
  -webkit-animation: scale-in-hor-left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-in-hor-left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-4-10 17:43:36
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-hor-left
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-hor-left {
  0% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
.slide-in-left {
  -webkit-animation: slide-in-left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-left 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-4-10 18:21:10
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
// 向上飞出动画
.fadeOutTop {
  -webkit-animation-name: fadeOutTop;
  animation-name: fadeOutTop;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeOutTop {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 0;
  }
}
// 左侧弹出
.popInLeft {
  -webkit-animation-name: popInLeft;
  animation-name: popInLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

@keyframes popInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1);
    transform: translate3d(-200px, 0, 0) scale3d(0.1, 0.1, 0.1);
  }
  40% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    transform: translate3d(0, 0, 0) scale3d(1.08, 1.08, 1.08);
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  60% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  80% {
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pullDown {
  -webkit-animation-name: pullDown;
  animation-name: pullDown;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@keyframes pullDown {
  0% {
    -webkit-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
  }
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: center top;
    transform-origin: center top;
  }
  100% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
// loading
.roll-in-left {
  -webkit-animation: roll-in-left 0.6s linear infinite both;
  animation: roll-in-left 0.6s linear infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2022-6-27 18:9:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes roll-in-left {
  0% {
    transform: rotate(-540deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(540deg);
  }
}
@keyframes roll-in-left {
  0% {
    transform: rotate(-540deg);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(540deg);
  }
}
